<template>
	<view class="container">
        <div class="header">
            <div class="header-bar" :style="{width: 25*orderList.length + 'vw'}">
                <div class="item" :class="{active: tag_index == index}" v-for="(item, index) in orderList" :key="index" @click="tag_index = index">{{item.name}}</div>
            </div>
        </div>

        <div class="wrapper">
            <div class="swiper-wrapper" :style="{'margin-left': -100*tag_index + 'vw', width: 100*orderList.length + 'vw'}">
                <div class="list-wrapper" v-for="(data, idx) in orderList" :key="idx">
                    <div class="list">
                        <div v-if="loading" class="loading">
                            <u-loading class="icon" mode="circle"></u-loading>
                            <div>订单加载中...</div>
                        </div>

                        <template v-if="data.list.length">
                            <div class="item" v-for="(item, index) in data.list" :key="index">
                                <div class="item-title">
                                    <div class="item-name">{{item.orderName}}</div>
                                    <div class="item-status" :class="{
                                        'pre': item.orderStatus == OrderStatus.pending,
                                        'warning': item.orderStatus == OrderStatus.waiting, 
                                        'normal': item.orderStatus == OrderStatus.done, 
                                        'danger': item.orderStatus == OrderStatus.refund
                                    }">{{data.name}}</div>
                                </div>
                                <div class="item-content">
                                    <div class="item-detail">
                                        <div class="item-label">订单编号 :</div>
                                        <div class="item-value">{{item.orderNumber}}</div>
                                    </div>
                                    <div class="item-detail">
                                        <div class="item-label">下单时间 :</div>
                                        <div class="item-value">{{item.orderTime}}</div>
                                    </div>
                                    <div class="item-detail">
                                        <div class="item-label">支付时间 :</div>
                                        <div class="item-value">{{item.payTime}}</div>
                                    </div>
                                    <div class="item-detail">
                                        <div class="item-label">购买数量 :</div>
                                        <div class="item-value">{{(item.amount)}}</div>
                                    </div>
                                    <div class="item-detail">
                                        <div class="item-label">付款金额 :</div>
                                        <div class="item-value">{{(item.orderPrice)/100}}元</div>
                                    </div>
                                    <!-- 护工 家政 -->
                                    <div v-if="item.yyTime" class="item-detail">
                                        <div class="item-label">预约日期 :</div>
                                        <div class="item-value">{{item.yyTime}}</div>
                                    </div>
                                    <div v-if="item.bizType != 2" class="item-detail">
                                        <div class="item-label">服务地址 :</div>
                                        <div class="item-value">{{item.address}}</div>
                                    </div>
                                    <!-- 文娱 -->
                                    <div v-if="item.bizInfo && JSON.parse(item.bizInfo).startTime" class="item-detail">
                                        <div class="item-label">课程时间 :</div>
                                        <div class="item-value">{{JSON.parse(item.bizInfo).startTime}}</div>
                                    </div>
                                    <div v-if="item.bizInfo && JSON.parse(item.bizInfo).address" class="item-detail">
                                        <div class="item-label">课程地址 :</div>
                                        <div class="item-value">{{JSON.parse(item.bizInfo).address}}</div>
                                    </div>
                                </div>
                                <div v-if="item.bizType != OrderStatus.service && item.orderStatus != OrderStatus.refund" class="item-footer">
                                    <div class="btn-confirm-order" @click="toTimeLine(item)">订单进度</div>
                                    
                                    <template v-if="idx == OrderStatus.waiting">
                                        <div class="btn-confirm-order" @click="confirmOrder(item, OrderStatus.service)">开始服务</div>
                                    </template>
                                    <template v-if="idx == OrderStatus.service">
                                        <div class="btn-confirm-order" @click="confirmOrder(item, OrderStatus.done)">结束服务</div>
                                    </template>
                                    <template v-if="idx == OrderStatus.done">
                                        <div class="btn-confirm-order" @click="commentOrder(item)">开始评价</div>
                                    </template>
                                    <template v-if="idx == OrderStatus.comment">
                                        <div class="btn-confirm-order" @click="checkComment(item)">查看评价</div>
                                    </template>
                                </div>
                                <div v-if="item.bizType == OrderStatus.service" class="item-footer">
                                    <template v-if="item.bizInfo && JSON.parse(item.bizInfo).courseList && JSON.parse(item.bizInfo).courseList.length">
                                        <div class="btn-confirm-order" @click="checkCourse(item)">查看课程</div>
                                    </template>
                                </div>
                            </div>
                        </template>

                        <!-- 空数据 -->
                        <u-empty v-if="!data.list.length && !loading" text="暂无订单" mode="list" :margin-top="200"></u-empty>
                    </div>
                </div>
            </div>
        </div>

		<u-popup v-model="visiable" width="80%" height="60%" border-radius="14" mode="center">
            <div class="process-wrapper">
                <div class="process-title">订单进度</div>
                <div class="process-content">
                    <div class="process process1" :class="{'active': cur_status == OrderStatus.waiting}" @click="updateStatus()">开始服务</div>
                    <div class="process-pic"></div>
                    <div class="process process2" :class="{'active': cur_status == OrderStatus.service}" @click="updateStatus()">服务中</div>
                    <div class="process-pic" :class="{'hidden': cur_status == OrderStatus.waiting}"></div>
                    <div class="process process3" :class="{'active': cur_status == OrderStatus.done}" @click="updateStatus()">结束服务</div>
                </div>
            </div>
		</u-popup>

        <!-- 开始服务弹窗 -->
        <u-modal v-model="beginVisiable" :show-cancel-button="true" :mask-close-able="true"  :async-close="true" confirm-color="#59C4CA" content="确定开始服务吗?" @confirm="updateStatus(OrderStatus.service)"></u-modal>

        <!-- 结束服务弹窗 -->
        <u-modal v-model="endVisiable" :show-cancel-button="true" :mask-close-able="true"  :async-close="true" confirm-color="#59C4CA" content="确定结束服务吗?" @confirm="updateStatus(OrderStatus.done)"></u-modal>

        <u-toast ref="uToast" />
	</view>
</template>
<script>
import Vue from 'vue';

import { getOrderListAPI, modifyMyOrderAPI } from '../../api/order'
import { OrderStatus } from '../../api/config/enums'

const app = getApp()
export default Vue.extend({
    data(){
        return {
            OrderStatus,
            loading: true,
            beginVisiable: false,
            endVisiable: false,
            visiable: false,
            orderList: [
                {
                    name: '待派单',
                    status: OrderStatus.pending,
                    list: []
                },
                {
                    name: '待服务',
                    status: OrderStatus.waiting,
                    list: []
                },
                {
                    name: '服务中',
                    status: OrderStatus.service,
                    list: []
                },
                {
                    name: '已完成',
                    status: OrderStatus.done,
                    list: []
                },
                {
                    name: '已评价',
                    status: OrderStatus.comment,
                    list: []
                },
                {
                    name: '已退款',
                    status: OrderStatus.refund,
                    list: []
                },
            ],
            tag_index: 0,
            cur_status: OrderStatus.waiting // 当前查看的订单状态
        }
    },
    onLoad(options){
    },
    onShow(){
        this.init()
    },
    methods: {
        init(){
            getOrderListAPI({
                sessionId: app.globalData.sessionId
            }).then(res => {
                this.handleOrderList(res.orderList)
                this.loading = false
            }).catch(err => {
                this.$refs.uToast.show({
		    	    title: err,
		    	    type: 'error',
                })
                this.loading = false
            })
        },
        checkCourse(item){
            this.$u.route('pages/courseTime/courseTime', item)
        },
        toTimeLine(item){
            this.$u.route('pages/orderTimeLine/orderTimeLine', item)
        },
        commentOrder(item){
            this.$u.route('pages/comment/comment', {
                orderFlow: item.orderFlow,
                orderName: item.orderName
            })
        },
        checkComment(item){
            this.$u.route('pages/comment/comment', {
                orderFlow: item.orderFlow,
                orderName: item.orderName,
                hasComment: true,
            })
        },
        // 根据状态分类订单
        handleOrderList(list){
            // 清空
            this.orderList.forEach(item => {
                item.list = []
            })

            // 分类
            list.forEach(item => {
                this.orderList[item.orderStatus].list.push(item)
            })
        },
        updateStatus(status){
            modifyMyOrderAPI({
                sessionId: app.globalData.sessionId,
                orderFlow: this.orderFlow,
                orderType: status
            }).then(res => {
                this.$refs.uToast.show({
				    title: '操作成功！',
				    type: 'success',
                    callback: () => {
                        this.init()
                        this.beginVisiable = false
                        this.endVisiable = false
                    }
                })
            }).catch(err => {
                this.$refs.uToast.show({
				    title: err,
				    type: 'error',
                })
            })
        },
        showModal(){
            this.visiable = true
        },
        confirmOrder(item, status){
            let { orderFlow } = item
            this.orderFlow = orderFlow
            if(status == OrderStatus.service){
                this.beginVisiable = true
            } else if(status == OrderStatus.done){
                this.endVisiable = true
            }
        }
    }
})
</script>
<style lang="scss" scoped>
@import '../../assets/scss/common.scss';

.container{
    min-height: 100vh;
    background-color: #efefef;
}

.header{
    // display: flex;
    width: 100vw;
    padding: 20rpx 0;
    overflow-x: auto;
    // justify-content: space-around;
    .header-bar{
        display: flex;
        .item{
            width: 20vw;
            margin: 0 2.5vw;
            text-align: center;
            font-size: 28rpx;
            line-height: 1;
            padding: 15rpx 30rpx;
            border-radius: 30rpx;
            transition-duration: 0.2s;
            &.active{
                background-color: $theme-color;
                color: #fff;
            }
        }
    }
}

.wrapper{
    position: fixed;
    top: 100rpx;
    bottom: 0;
    left: 0;
    right: 0;
    .swiper-wrapper{
        // width: 400vw;
        height: 100%;
        display: flex;
        transition-duration: 0.2s;
        .list-wrapper{
            width: 100vw;
            height: 100%;
            overflow: auto;
            .list{
                padding: 0 30rpx 30rpx;
                .item{
                    background: #fff;
                    margin-bottom: 30rpx;
                    padding: 0 30rpx 10rpx;
                    border-radius: 30rpx;
                    .item-title{
                        display: flex;
                        justify-content: space-between;
                        align-items: center;
                        height: 85rpx;
                        border-bottom: 1rpx solid #efefef;
                        .item-name{
                            font-size: 32rpx;
                        }
                        .item-status{
                            font-size: 28rpx;
                            color: $theme-color;
                            &.pre{
                                color: #aaa
                            }
                            &.warning{
                                color: #E6A23C
                            }
                            &.normal{
                                color: #666
                            }
                            &.danger{
                                color: #F56C6C
                            }
                        }
                    }
                    .item-content{
                        font-size: 26rpx;
                        padding: 10rpx 0;
                        .item-detail{
                            display: flex;
                            line-height: 52rpx;
                            .item-label{
                                flex: none;
                                color: #999;
                                margin-right: 10rpx;
                            }
                            .item-value{
                                color: #666;
                            }
                        }
                    }
                    .item-footer{
                        display: flex;
                        justify-content: flex-end;
                        width: 100%;
                        box-sizing: border-box;
                        padding: 10rpx 0 20rpx;
                        div{
                            margin-left: 10rpx;
                            font-size: 26rpx;
                            line-height: 1;
                            padding: 15rpx 30rpx;
                            // border: 1px solid $theme-color;
                            border-radius: 26rpx;
                            background-color: $theme-color;
                            color: #fff;
                        }
                    }
                }
            }
        }
    }
}

.process-wrapper{
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    .process-title{
        flex: none;
        font-size: 36rpx;
        padding: 30rpx 0;
    }
    .process-content{
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        flex: auto;
        .process{
            width: 260rpx;
            font-size: 34rpx;
            line-height: 75rpx;
            text-align: left;
            background-color: #A7A7A7;
            color: #fff;
            border-radius: 38rpx;
            text-align: center;
            &.active{
                background-color: #FB7133;
            }
        }
        .process-pic{
            width: 92rpx;
            height: 92rpx;
            margin: 40rpx 0;
            background-image: url('https://bizser.njtrh.com:9954/images/biztd/20211209/20211209011647516.jpg');
            background-size: contain;
            background-repeat: no-repeat;
            background-position: center;
            transform: rotate(90deg);
            &.hidden{
                visibility: hidden;
            }
        }
    }
}

.loading{
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #666;
    padding-top: 200rpx;
    .icon{
        margin-bottom: 20rpx;
    }
}
</style>